<script>
function appendElement(parentId, childId) {
  var child = document.createElement("div");
  child.id = childId;
  document.getElementById(parentId).appendChild(child);
}

function modifyAttribute(elementId, name, value) {
  var element = document.getElementById(elementId);
  element.setAttribute(name, value);
}

function modifyAttrNode(elementId, name, value) {
  var element = document.getElementById(elementId);
  element.attributes[name].value = value;
}

function setAttrNode(elementId, name, value) {
  var element = document.getElementById(elementId);
  var attr = document.createAttribute(name);
  attr.value = value;
  element.attributes.setNamedItem(attr);
}

function modifyStyleAttribute(elementId, name, value) {
  var element = document.getElementById(elementId);
  element.style.setProperty(name, value);
}

function removeElement(elementId) {
  var element = document.getElementById(elementId);
  element.parentNode.removeChild(element);
}

function setInnerHTML(elementId, html) {
  var element = document.getElementById(elementId);
  element.innerHTML = html;
}

function breakDebugger() {
  debugger;
}

function authorShadowRoot() {
  return document.getElementById("hostElement").shadowRoot;
}

function authorShadowElement(id) {
  return authorShadowRoot().getElementById(id);
}

function appendElementToAuthorShadowTree(parentId, childId) {
  var child = document.createElement("div");
  child.id = childId;
  authorShadowElement(parentId).appendChild(child);
}

function appendElementToOpenShadowRoot(childId) {
  var child = document.createElement("div");
  child.id = childId;
  authorShadowRoot().appendChild(child);
}
</script>
<div id="rootElement" style="color: red">
  <div id="elementToRemove"></div>
</div>
<div id="hostElement"></div>
<script>
var root = document.getElementById("hostElement").createShadowRoot();
root.innerHTML = "<div id='outerElement' style='red'><input id='input'/></div>";
</script>